<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
	$(document).ready(function() {
		$('.deleteConfirm').each(function() {
			$(this).click(function() {
				confirmDelete(this.id);
			});
		});
	});

	$(function() {
		$("#dialog-confirm").dialog({
			autoOpen : false,
			resizable : false,
			height : 140,
			modal : true,
			buttons : {
				"Aceptar" : function() {
					var categoryId = $('#hdnCategoryId').val();
					deleteCategory(categoryId);
					showCategories();
					$(this).dialog("close");
				},
				"Cancelar" : function() {
					$(this).dialog("close");
				}
			}
		});
	});

	function confirmDelete(categoryId) {
		$("#dialog-confirm").dialog("open");
		$('#hdnCategoryId').val(categoryId);
	}

	function deleteCategory(categoryId) {
		var target = $('#add-new-form');
		var data = 'categoryId=' + categoryId;
		$.post("deleteCategory", data, function(rpta) {
			$(target).html(rpta);
		});
	}
	
	function showCategories() {
		var target = $('#divContainer');
		var data = '';
		$(target).html("<img src='img/ajax-loader.gif'>");
		$.get("showCategories", data, function(rpta) {
			$(target).html(rpta);
		});
	}
</script>
<table class="table table-striped table-bordered table-condensed">
	<thead>
		<tr>
			<th>Codigo</th>
			<th>Nombre</th>
			<th>Descripcion</th>
			<th>Monto</th>
			<th>Acciones</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach items="${requestScope.categories}" var="r">
			<tr>
				<td>${r.categoryID}</td>
				<td><a href='categories.jsp#tabs-${r.categoryID}'>${r.categoryName}</a></td>
				<td>${r.categoryDescription}</td>
				<td>${r.amountToShow}</td>
				<td><a href="javascript:show('edit','${r.categoryID}');"><img
						id="imgcheck" src="img/action_check.png" alt="Editar" border="0" /></a><a
					id='${r.categoryID}' class="deleteConfirm"><img id="imgdelete"
						src="img/action_delete.png" alt="Eliminar" border="0" /></a></td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<div id='dialog-confirm' title='¿Esta seguro de Eliminar?'>
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span>La categoria se
		eliminará.
	</p>
</div>